<template>
  <div class="level-dialog">
    <transition name="fade">
      <div class="lay-mask"
           v-show="visible"
           @click="closeDialog()"></div>
    </transition>
    <transition
      @beforeEnter="beforeEnter"
      name="fade">
      <div class="lay-box tc"
           v-show="visible"
           :style="{'margin-top': -content.height/2 + 15 + 'px','margin-left': -content.width/2 + 'px'}"
           ref="layBox">
        <p class="lay-close" @click="closeDialog()"></p>
        <div class='prize-list-dialog'>
          <h1><img src='../assets/imgs/tit1.png' alt=''></h1>
          <ul class='prize-table'>
            <li v-for="item in data"><span class='item-1'>{{item.weixin}}</span><span class='item-2'>{{item.zjtime}}</span><span class='item-3'>{{item.title}}</span></li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'record_dialog',
    data () {
      return {
        content: {}
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      data: {
        required: true
      }
    },
    watch: {
      'visible': function () {
        this.bodyOverflow()
      }
    },
    computed: {
      // comData () {
      //   return _.concat(this.data, this.data, this.data, this.data)
      // }
    },
    methods: {
      beforeEnter () {
        this.updatePosition()
      },
      updatePosition () {
        if (this.showFlag || this.isTransed) return
        this.$nextTick(() => {
          this.showFlag = true
          this.isTransed = true
          // 计算宽高 修补定位到中心
          let _layBox = $(this.$refs.layBox)
          this.$set(this.$data, 'content', {
            width: _layBox.outerWidth(true),
            height: _layBox.outerHeight(true)
          })
        })
      },
      closeDialog () {
        this.$emit('update:visible', false)
      },
      bodyOverflow () {
        if (this.visible) {
          $('body').css('overflow', 'hidden')
        } else {
          $('body').css('overflow', 'auto')
        }
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .level-dialog{
    .lay-mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      background-color: rgba(0,0,0,.65);
    }
    .lay-box {
      width: 96%;
      max-width: 360px;
      height: auto;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 1000;
      background: #FFED5D;
      border-radius: 10px;
      .lay-close{
        position:absolute;
        right:5px;
        top:5px;
        width:30px;
        height:30px;
        background:url("../assets/imgs/close.png");
        background-size:contain;
        }
      /*中奖记录*/
      .prize-list-dialog {
        padding: 50px 15px 50px;
        h1 {
          text-align: center;
          img {
            max-width: 300px;
            }
          }
        .prize-table {
           margin-top: 15px;
           border-radius: 5px;
           max-height: 65vh;
           overflow-x: hidden;
           overflow-y: auto;
           li {
             line-height: 40px;
             border-top: 1px solid #ECC80B;
             color: #572800;
             overflow: hidden;
             &:first-child {
               border-top: none;
               }
             span {
               float: left;
               display: block;
               width: 33.33%;
               color:#572800;
               text-align: center;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
               &.item-2 {
                 color: rgba(87, 40, 0, .7);
                 }
               }
             }
           }
        }
    }
  }
</style>
